import { BellOutlined, LogoutOutlined, UserOutlined } from '@ant-design/icons';
import { history } from '@umijs/max';
import { Avatar, Badge, Button, Dropdown, Space } from 'antd';

const items = [
  {
    key: 'logout',
    icon: <LogoutOutlined />,
    label: '退出登录',
  },
];
export function RightContent() {
  function onClick(e: any) {
    if (e.key === 'logout') {
      console.log('logout');
    }
  }
  const links = [
    { link: '/user', icon: <UserOutlined />, label: '用户中心' },
    {
      link: '/message',
      icon: <BellOutlined />,
      label: (
        <Badge count={10} offset={[20, 0]}>
          消息中心
        </Badge>
      ),
    },
  ];

  return (
    <Space>
      {links.map(({ link, icon, label }) => (
        <Button
          type="text"
          key={link}
          icon={icon}
          onClick={() => history.push(link)}
          style={{
            background:
              location.pathname === link ? 'rgba(0, 0, 0, 0.04)' : undefined,
          }}
        >
          {label}
        </Button>
      ))}
      <Dropdown menu={{ items, onClick }}>
        <Space style={{ marginLeft: 20 }}>
          <Avatar src={undefined} icon={<UserOutlined size={16} />} />
          admin
        </Space>
      </Dropdown>
    </Space>
  );
}
